<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>砸金蛋首页</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <style type="text/css">
        *{padding: 0;margin: 0;font-family: 'Microsoft Yahei', 'Helvetica Neue', Helvetica, sans-serif;}
        html{font-size: 50px;}
        html,body,#main{width: 100%;height: 100%;margin: 0;padding: 0;}
        #main{position: relative;overflow: hidden;}
        .vertical-align{position: absolute;left:50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);}
        a{color: #ff9ea6;font-size: .28rem;text-decoration: none;tap-highlight-color: rgba(0, 0, 0, 0);-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
        a:active{color: #fff;background:none;}
        #back{width: 100%;height: 100%;}
        #protocol{width: 100%;bottom: 1.4rem;font-size: .24rem!important;color: #ff9ea6;position: absolute; left: 50%;
            -webkit-transform: translateX(-50%) scale(.9);transform: translateX(-50%) scale(.9);}
        #select{vertical-align: middle;}
        #agree{font-size: .24rem;}
        #btn-action{width: 4rem;height: 1rem;bottom: .3rem;}
        #rule{position: absolute;left: .4rem;bottom: .2rem;text-decoration: underline;}
        #list{position: absolute;right: .4rem;bottom: .2rem;text-decoration: underline;}

        /*复选框*/
        .chk_1{
            display: none;
        }

        /*******STYLE 1*******/
        .chk_1 + label {
            background-color: #fff;
            padding: 7px;
            display: inline-block;
            position: relative;
            vertical-align: middle;
        }

        .chk_1:checked + label {
            background-color: #fff;
            color: #243441;
        }

        .chk_1:checked + label:after {
            content: '\2714';
            position: absolute;
            top: 0px;
            left: 0px;
            color: #D64350;
            width: 100%;
            text-align: center;
            vertical-align: text-top;
        }
        /*弹框*/
        /*规则*/
        .mask{position: absolute;width: 100%;height:100%;top:100%;top:0;left:0;background: rgba(0,0,0,0.5);z-index: 999;display: none;}
        .close{width: .8rem;height: .8rem;position: absolute;top:5%;right: 10px;}
        .mask-content{width: 90%;margin: 30% auto 0 auto;height: 100%;}
        .rule-title{width: 6.3rem;height: 1.2rem;display: block;margin: 0 auto;position: relative;}
        .rule-content{color: #a26a32;padding: 30px 10px 15px 15px;background-color: #fff6de;border-radius: 5px;
            margin-top: -.6rem;font-size: .24rem;}
        #mask-rule .rule-content{height: 65%; overflow-y: scroll;}
        #mask-rule .mask-content{margin: 16% auto 0 auto;}
        #rule-list{/*padding: 0 15px;*/list-style: none;}
        .title{font-weight: bold;font-size: .3rem;}
        .margin-bottom-5{margin-bottom: 5px;}
        .number{display: inline-block; vertical-align: top; width: 15px; height: 15px;border-radius: 50%;
            background-color: #f5684e;color: #f9d48b;text-align: center;line-height: 15px;margin-right: 5px;}
        .li-content{display: inline-block; vertical-align: top; width: 91%;}

        /*中奖名单*/
        table{margin: 20px auto;width: 85%;text-align: center;}
        table th{background-color: #f66a4f;padding: 10px;color: #fbeeb2;font-size: .3rem;}
        table td{padding: 8px;font-size: .28rem;}
        table tr:nth-child(3){background-color: #ffefd7;}
        table td{border-bottom: 1px solid #fccbb3;}
        table tr td:first-child{border-right:1px solid #fccbb3; }
        /*第二次抽奖提示*/
        #again-tip .rule-content{text-align: center;font-size: .32rem;font-weight: bolder;padding: 50px 10px 50px 15px;}

        #activity-info{font-size: .44rem;font-weight: bold;color: #fff;position:absolute;top:1.8rem;text-align: center;
            width: 100%;line-height: .7rem;}
        #info2,#info3{display: none;}

    </style>
</head>
<body>
<div id="main">
    <img src="img/forward_back.png" id="back"/>
    <div id="activity-info">
        <div id="info1">
            <div>小主 ，您来晚啦，</div>
            <div>活动已结束，下次更精彩哦~</div>
        </div>
        <div id="info2">
            <div>小主 ，您来早啦，</div>
            <div>活动还未开始哦~</div>
        </div>
        <div id="info3">
            <div>小主 ，您还未关注广发呢，</div>
            <div>请先关注广发再来体验哦~</div>
        </div>
    </div>
    <div id="protocol">
        <input type="checkbox" checked id="select" class="chk_1"/><label for="select"></label>
        <a href="http://m.cignacmb.com/campaign/mc/free/pdf/xlb.pdf"><span id="agree">已仔细阅读保险条款中的保险责任、责任免除、理赔条款等内容</span></a>
    </div>
    <img src="img/btn-forward.png" id="btn-action" class="vertical-align" onclick="startActivity()"/>

    <a href="#" id="rule" onclick="showMask('mask-rule')">活动规则</a>
    <a href="#" id="list" onclick="showMask('name-list')">中奖名单</a>
    <div id="mask-rule" class="mask">
        <img src="img/close.png" alt="" class="close" onclick="hideMask('mask-rule')"/>
        <div class="mask-content">
            <img src="img/activity-rule.png" alt="" class="rule-title"/>
            <div class="rule-content">
                <div class="margin-bottom-5">
                    <span class="title">活动时间:</span>
                    <span>2016年12月8日-2017年1月7日</span>
                </div>
                <div class="title margin-bottom-5">活动规则:</div>
                <ul id="rule-list">

                    <li><span class="number">1</span><span class="li-content">活动赠送的保障为招商信诺航空交通宝意外伤害保险。保障期限为：2016年2月1日-2017年4月30日。</span></li>
                    <li><span class="number">2</span><span class="li-content">本次活动仅限于广东、江苏、浙江、北京、上海、湖北、山东、四川、辽宁、陕西、湖南、重庆河南地区的客户参与.</span></li>
                    <li><span class="number">3</span><span class="li-content">参加活动即有机会以600广发信用卡积分（约1元人民币）兑换保额10万的招商信诺行路宝公共交通意外伤害保险保险（简称：行路宝），还有机会赢取尼康微单相机。</span></li>
                    <li><span class="number">4</span><span class="li-content">本次活动用户抽取的尼康微单相机共计2台；在活动结束后15个工作日内发放，由招商信诺人寿保险有限公司提供，届时将会有客服事先与用户进行电话沟通派奖事宜。</span></li>
                    <li><span class="number">5</span><span class="li-content">您参与活动，视为您同意将您的姓名、手机号码、身份证号码等相关信息提交给招商信诺人寿保险有限公司跟进后续服务。</span></li>
                    <li><span class="number">6</span><span class="li-content">参与人同时满足以下条件方可享优惠： 广发信用卡客户（仅持有广发商务卡、公司卡、转账卡、公务卡、外币单币卡及仅持有我行信用卡附属卡的客户除外）；广发信用卡在有效期内，且已激活；年龄在保障范围内。</span></li>
                    <li><span class="number">7</span><span class="li-content">本活动最终解释权归广发银行信用卡中心所有</span></li>

                </ul>
            </div>

        </div>
    </div>
    <div id="name-list" class="mask">
        <img src="img/close.png" alt="" class="close" onclick="hideMask('name-list')"/>
        <div class="mask-content">
            <img src="img/name.png" alt="" class="rule-title"/>
            <div class="rule-content">
                <table cellspacing="0">
                    <tr>
                        <th>手机</th>
                        <th>奖品</th>
                    </tr>
                    <tr>
                        <td>138****4561</td>
                        <td>尼康相机一台</td>
                    </tr>
                    <tr>
                        <td>138****4561</td>
                        <td>尼康相机一台</td>
                    </tr>
                </table>
            </div>

        </div>
    </div>
    <div id="again-tip" class="mask">
        <img src="img/close.png" alt="" class="close" onclick="hideMask('again-tip')"/>
        <div class="mask-content">
            <img src="img/tips.png" alt="" class="rule-title"/>
            <div class="rule-content">
                <div class="margin-bottom-5">小主，您已参加过抽奖了哦~</div>
                 <div>中奖信息请点击中奖名单查看</div>
            </div>

        </div>
    </div>
</div>

<script type="text/javascript">
    ;(function()
    {
        function resize()
        {
            var docEl = document.documentElement;
            var clientWidth = docEl.clientWidth < 750 ? docEl.clientWidth : 750;
            if (!clientWidth) return;
            docEl.style.fontSize = Math.floor(100 * (clientWidth / 750)) + 'px';
        }

        if('onorientationchange' in window) window.addEventListener('onorientationchange', resize, false);
        window.addEventListener('resize', resize, false);
        document.addEventListener('DOMContentLoaded', resize, false);
    })();
    function  hideMask(ele)
    {
        var mask=getId(ele);
        mask.style.display='none';
    }

    function showMask(ele)
    {
        var mask=getId(ele);
        mask.style.display='block';
    }
    function startActivity()
    {
        var select=getId('select');
        if(select.checked)
        {
            location.href='action.html';
        }
        else
        {
            alert('请先阅读保险条款中的保险责任、责任免除、理赔条款等内容');
        }

    }
    function getId(id)
    {
        return document.getElementById(id);
    }
</script>
</body>
</html>